<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>dispaly 和 visibility</title>
</head>
<style>
    /*
       1> display: 元素应该生成的框的样式
            可选值：
                - none  : 元素不显示，且不占用页面空间
                - block : 将一个元素变为块级元素
                - inline: 将一个元素便为行级元素(默认值)
                - inline-block : 将一个元素变为 行内块元素
                        既可以设置宽高，又不会独占一行，img 就是典型的 行内块元素

        2> visibility: 元素是否可见,无论是否可见，都会占据页面空间
           可选值:
                - visibility：元素是可见的(默认)
                - hidden ：元素是不可见的
    */
    a {
        width: 200px;
        height: 200px;
        background-color: red;
        display: block;
    }
</style>

<body>
    <a href="">这是一个链接</a>
    <span> hello world</span>

</body>

</html>